<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的</title>


    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/js/swiper-4.4.2/swiper.min.css" />
    <link rel="stylesheet" href="assets/css/sweetalert.min.css" />
    <link rel="stylesheet" href="assets/css/main.css" />

    <script src="assets/js/jquery.slim.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/swiper-4.4.2/swiper.min.js"></script>
    <script src="assets/js/sweetalert.min.js"></script>
    <script src="assets/js/common.js"></script>




</head>
<body class="main-color">
    <!--start member banner -->
    <div class="container gold-wrapper">
        <div class="my-gold-info flex content-between flex-middle">
            <div>
                <span class="">我的余额: </span>
                <span class="icon-gold mg-middle"></span>
                <span class="bold">495</span>
            </div>
            <a href="gold-list.html" class="normal-a gold-log-btn">财务记录</a>
        </div>
    </div>
    <!--end member banner -->

    <div class="container gold-recharge-list">
        <!--start 充值选择-->
        <div class="gold-recharge-item flex flex-middle content-between active" data-id="1">
            <div class="gold-recharge-tip">
                <span class="icon-gold mg-middle"></span>
                <span class="get-pay-gold">90</span>
                <span class="price-color gold-more-tip"><small>送10G币</small></span>
            </div>
            <div class="gold-recharge-money">￥9</div>
        </div>
        <!--end 充值选择-->

        <!--start 充值选择-->
        <div class="gold-recharge-item flex flex-middle content-between" data-id="2">
            <div class="gold-recharge-tip">
                <span class="icon-gold mg-middle"></span>
                <span class="get-pay-gold">280</span>
                <span class="price-color gold-more-tip"><small>送28G币</small></span>
            </div>
            <div class="gold-recharge-money">￥28</div>
        </div>
        <!--end 充值选择-->

        <!--start 充值选择-->
        <div class="gold-recharge-item flex flex-middle content-between" data-id="3">
            <div class="gold-recharge-tip">
                <span class="icon-gold mg-middle"></span>
                <span class="get-pay-gold">680</span>
                <span class="price-color gold-more-tip"><small>送100G币</small></span>
            </div>
            <div class="gold-recharge-money">￥68</div>
        </div>
        <!--end 充值选择-->

        <!--start 充值选择-->
        <div class="gold-recharge-item flex flex-middle content-between" data-id="4">
            <div class="gold-recharge-tip">
                <span class="icon-gold mg-middle"></span>
                <span class="get-pay-gold">980</span>
                <span class="price-color gold-more-tip"><small>送180G币</small></span>
            </div>
            <div class="gold-recharge-money">￥98</div>
        </div>
        <!--end 充值选择-->

        <!--start 充值选择-->
        <div class="gold-recharge-item flex flex-middle content-between" data-id="5">
            <div class="gold-recharge-tip">
                <span class="icon-gold mg-middle"></span>
                <span class="get-pay-gold">1980</span>
                <span class="price-color gold-more-tip"><small>送4000G币</small></span>
            </div>
            <div class="gold-recharge-money">￥198</div>
        </div>
        <!--end 充值选择-->

        <!--start 充值选择-->
        <div class="gold-recharge-item flex flex-middle content-between" data-id="6">
            <div class="gold-recharge-tip">
                <span class="icon-gold mg-middle"></span>
                <span class="get-pay-gold">2980</span>
                <span class="price-color gold-more-tip"><small>送298G币</small></span>
            </div>
            <div class="gold-recharge-money">￥298</div>
        </div>
        <!--end 充值选择-->
    </div>



    <div class="container">
        <div class="pay-btn-wrapper flex recharge-pay-wrapper">
            <div class="pay-btn wexin-btn" data-id="微信"><img src="assets/images/pay-btn-02.png" alt="微信支付">微信支付</div>
            <div class="pay-btn alipay-btn" data-id="支付宝"><img src="assets/images/pay-btn-01.png" alt="支付宝支付">支付宝支付</div>
        </div>
    </div>

</body>


<script>
    $(function(){

        //充值选择
        $('.gold-recharge-item').click(function() {
            $(this).addClass('active').siblings().removeClass('active')
        })

        //充值操作
        $('.pay-btn').click(function(){
            var pay_dom = $('.gold-recharge-item.active');
            if(pay_dom.length==0) {
                swal('','请选择充值项','error');
                return false;
            }
            var pay_id = pay_dom.data('id');
            var title= $(this).data('id');

            swal('','使用' + title + '充值成功,充值项:' + pay_id, 'success')


        })


    })

</script>


</html>